import WebGl from '@/modules/three';
import assets from '@/modules/assets';
import { BlurCircle } from '@/modules/threeMeshs';
import { LumenSideMaterial } from '@/modules/threeMaterials';
import CalcThree from '@/modules/calcThree';
import { FlightGroup } from './flightGroup';
// import { TIFFLoader } from 'threeJsm/loaders/TIFFLoader.js'

const { Three, TWEEN, dat, Stats, OrbitControls, OBJLoader, MTLLoader } = WebGl;

const LatLngs = [
  { name: '北京市', lng: 116.41667, lat: 39.91667 },
  { name: '上海市', lng: 121.43333, lat: 34.5 },
  { name: '天津市', lng: 117.2, lat: 39.13333 },
  { name: '香港', lng: 114.1, lat: 22.2 },
  { name: '广州', lng: 113.23333, lat: 23.16667 },
  { name: '珠海', lng: 113.51667, lat: 22.3 },
  { name: '深圳', lng: 114.06667, lat: 22.61667 },
  { name: '杭州', lng: 120.2, lat: 30.26667 },
  { name: '重庆市', lng: 106.45, lat: 29.56667 },
  { name: '青岛', lng: 120.33333, lat: 36.06667 },
  { name: '厦门', lng: 118.1, lat: 24.46667 },
  { name: '福州', lng: 119.3, lat: 26.08333 },
  { name: '兰州', lng: 103.73333, lat: 36.03333 },
  { name: '贵阳', lng: 106.71667, lat: 26.56667 },
  { name: '长沙', lng: 113.0, lat: 28.21667 },
  { name: '南京', lng: 118.78333, lat: 32.05 },
  { name: '南昌', lng: 115.9, lat: 28.68333 },
  { name: '沈阳', lng: 123.38333, lat: 41.8 },
  { name: '太原', lng: 112.53333, lat: 37.86667 },
  { name: '成都', lng: 104.06667, lat: 30.66667 },
  { name: '拉萨', lng: 91.0, lat: 29.6 },
  { name: '乌鲁木齐', lng: 87.68333, lat: 43.76667 },
  { name: '昆明', lng: 102.73333, lat: 25.05 },
  { name: '西安', lng: 108.95, lat: 34.26667 },
  { name: '西宁', lng: 101.75, lat: 36.56667 },
  { name: '银川', lng: 106.26667, lat: 38.46667 },
  { name: '兰浩特', lng: 122.08333, lat: 46.06667 },
  { name: '哈尔滨', lng: 126.63333, lat: 45.75 },
  { name: '长春', lng: 125.35, lat: 43.88333 },
  { name: '武汉', lng: 114.31667, lat: 30.51667 },
  { name: '郑州', lng: 113.65, lat: 34.76667 },
  { name: '石家庄', lng: 114.48333, lat: 38.03333 },
  { name: '三亚', lng: 109.5, lat: 18.2 },
  { name: '海口', lng: 110.35, lat: 20.01667 },
  { name: '澳门', lng: 113.5, lat: 22.2 },

  { name: '阿富汗', lng: 69.11, lat: 34.28 },
  { name: '安哥拉', lng: 13.15, lat: -8.5 },
  { name: '阿根廷', lng: -60.0, lat: -36.3 },
  { name: '亚美尼亚', lng: 44.31, lat: 40.1 },
  { name: '澳大利亚', lng: 149.08, lat: -35.15 },
  { name: '奥地利', lng: 16.22, lat: 48.12 },
  { name: '阿塞拜疆', lng: 49.56, lat: 40.29 },
  { name: '孟加拉国', lng: 90.26, lat: 23.43 },
  { name: '白俄罗斯', lng: 27.3, lat: 53.52 },
  { name: '比利时', lng: 4.21, lat: 50.51 },
  { name: '贝宁', lng: 2.42, lat: 6.23 },
  { name: '不丹', lng: 89.45, lat: 27.31 },
  { name: '玻利维亚', lng: -68.1, lat: -16.2 },
  { name: '巴西', lng: -47.55, lat: -15.47 },
  { name: '文莱', lng: 115.0, lat: 4.52 },
  { name: '保加利亚', lng: 23.2, lat: 42.45 },
  { name: '柬埔寨', lng: 104.55, lat: 11.33 },
  { name: '喀麦隆', lng: 11.35, lat: 3.5 },
  { name: '加拿大', lng: -75.42, lat: 45.27 },
  { name: '开曼群岛', lng: -81.24, lat: 19.2 },
  { name: '中非共和国', lng: 18.35, lat: 4.23 },
  { name: '智利', lng: -70.4, lat: -33.24 },
  { name: '哥伦比亚', lng: -74.0, lat: 4.34 },
  { name: '刚果', lng: 15.12, lat: -4.09 },
  { name: '克罗地亚', lng: 15.58, lat: 45.5 },
  { name: '古巴', lng: -82.22, lat: 23.08 },
  { name: '朝鲜', lng: 125.3, lat: 39.09 },
  { name: '丹麦', lng: 12.34, lat: 55.41 },
  { name: '吉布提', lng: 42.2, lat: 11.08 },
  { name: '厄瓜多尔', lng: -78.35, lat: -0.15 },
  { name: '埃及', lng: 31.14, lat: 30.01 },
  { name: '爱沙尼亚', lng: 24.48, lat: 59.22 },
  { name: '法罗群岛', lng: -6.56, lat: 62.05 },
  { name: '斐济', lng: 178.3, lat: -18.06 },
  { name: '芬兰', lng: 25.03, lat: 60.15 },
  { name: '法国', lng: 2.2, lat: 48.5 },
  { name: '冈比亚', lng: -16.4, lat: 13.28 },
  { name: '德国', lng: 13.25, lat: 52.3 },
  { name: '加纳', lng: -0.06, lat: 5.35 },
  { name: '希腊', lng: 23.46, lat: 37.58 },
  { name: '格陵兰', lng: -51.35, lat: 64.1 },
  { name: '根西岛', lng: -2.33, lat: 49.26 },
  { name: '几内亚', lng: -13.49, lat: 9.29 },
  { name: '圭亚那', lng: -58.12, lat: 6.5 },
  { name: '海地', lng: -72.2, lat: 18.4 },
  { name: '洪都拉斯', lng: -87.14, lat: 14.05 },
  { name: '匈牙利', lng: 19.05, lat: 47.29 },
  { name: '冰岛', lng: -21.57, lat: 64.1 },
  { name: '印度', lng: 77.13, lat: 28.37 },
  { name: '伊朗', lng: 51.3, lat: 35.44 },
  { name: '伊拉克', lng: 44.3, lat: 33.2 },
  { name: '爱尔兰', lng: -6.15, lat: 53.21 },
  { name: '意大利', lng: 12.29, lat: 41.54 },
  { name: '牙买加', lng: -76.5, lat: 18.0 },
  { name: '约旦', lng: 35.52, lat: 31.57 },
  { name: '哈萨克斯坦', lng: 71.3, lat: 51.1 },
  { name: '肯尼亚', lng: 36.48, lat: -1.17 },
  { name: '科威特', lng: 48.0, lat: 29.3 },
  { name: '老挝', lng: 102.36, lat: 17.58 },
  { name: '拉脱维亚', lng: 24.08, lat: 56.53 },
  // { name: '黎巴嫩', lng: 35.31, lat: 33.53 },
  // { name: '莱索托', lng: 27.3, lat: -29.18 },
  // { name: '利比里亚', lng: -10.47, lat: 6.18 },
  // { name: '立陶宛', lng: 25.19, lat: 54.38 },
  // { name: '卢森堡', lng: 6.09, lat: 49.37 },
  // { name: '马达加斯加', lng: 47.31, lat: -18.55 },
  // { name: '马拉维', lng: 33.48, lat: -14.0 },
  // { name: '马来西亚', lng: 101.41, lat: 3.09 },
  // { name: '马尔代夫', lng: 73.28, lat: 4.0 },
  // { name: '马耳他', lng: 14.31, lat: 35.54 },
  // { name: '马约特岛', lng: 45.14, lat: -12.48 },
  // { name: '墨西哥', lng: -99.1, lat: 19.2 },
  // { name: '莫桑比克', lng: 32.32, lat: -25.58 },
  // { name: '缅甸', lng: 96.2, lat: 16.45 },
  // { name: '纳米比亚', lng: 17.04, lat: -22.35 },
  // { name: '尼泊尔', lng: 85.2, lat: 27.45 },
  // { name: '荷兰', lng: 4.54, lat: 52.23 },
  // { name: '新西兰', lng: 174.46, lat: -41.19 },
  // { name: '尼加拉瓜', lng: -86.2, lat: 12.06 },
  // { name: '尼日尔', lng: 2.06, lat: 13.27 },
  // { name: '尼日利亚', lng: 7.32, lat: 9.05 },
  // { name: '挪威', lng: 10.45, lat: 59.55 },
  // { name: '阿曼', lng: 58.36, lat: 23.37 },
  // { name: '巴基斯坦', lng: 73.1, lat: 33.4 },
  // { name: '帕劳', lng: 134.28, lat: 7.2 },
  // { name: '巴拿马', lng: -79.25, lat: 9.0 },
  // { name: '巴拉圭', lng: -57.3, lat: -25.1 },
  // { name: '秘鲁', lng: -77.0, lat: -12.0 },
  // { name: '菲律宾', lng: 121.03, lat: 14.4 },
  // { name: '波兰', lng: 21.0, lat: 52.13 },
  // { name: '葡萄牙', lng: -9.1, lat: 38.42 },
  // { name: '波多黎各', lng: -66.07, lat: 18.28 },
  // { name: '卡塔尔', lng: 51.35, lat: 25.15 },
  // { name: '韩国', lng: 126.58, lat: 37.31 },
  // { name: '罗马尼亚', lng: 26.1, lat: 44.27 },
  // { name: '俄罗斯', lng: 37.35, lat: 55.45 },
  // { name: '卢旺达', lng: 30.04, lat: -1.59 },
  // { name: '圣卢西亚', lng: -60.58, lat: 14.02 },
  // { name: '萨摩亚', lng: -171.5, lat: -13.5 },
  // { name: '圣马力诺', lng: 12.3, lat: 43.55 },
  // { name: '沙特阿拉伯', lng: 46.42, lat: 24.41 },
  // { name: '塞内加尔', lng: -17.29, lat: 14.34 },
  // { name: '塞拉利昂', lng: -13.17, lat: 8.3 },
  // { name: '斯洛伐克', lng: 17.07, lat: 48.1 },
  // { name: '斯洛文尼亚', lng: 14.33, lat: 46.04 },
  // { name: '所罗门群岛', lng: 159.57, lat: -9.27 },
  // { name: '索马里', lng: 45.25, lat: 2.02 },
  { name: '西班牙', lng: -3.45, lat: 40.25 },
  // { name: '苏丹', lng: 32.35, lat: 15.31 },
  // { name: '苏里南', lng: -55.1, lat: 5.5 },
  // { name: '斯威士兰', lng: 31.06, lat: -26.18 },
  // { name: '瑞典', lng: 18.03, lat: 59.2 },
  // { name: '瑞士', lng: 7.28, lat: 46.57 },
  // { name: '泰国', lng: 100.35, lat: 13.45 },
  // { name: '马其顿', lng: 21.26, lat: 42.01 },
  // { name: '多哥', lng: 1.2, lat: 6.09 },
  // { name: '汤加', lng: -174.0, lat: -21.1 },
  // { name: '突尼斯', lng: 10.11, lat: 36.5 },
  // { name: '土耳其', lng: 32.54, lat: 39.57 },
  // { name: '土库曼斯坦', lng: 57.5, lat: 38.0 },
  // { name: '图瓦卢', lng: 179.13, lat: -8.31 },
  // { name: '乌干达', lng: 32.3, lat: 0.2 },
  // { name: '乌克兰', lng: 30.28, lat: 50.3 },
  { name: '阿联酋', lng: 54.22, lat: 24.28 },
  // { name: '英国', lng: -0.05, lat: 51.36 },
  // { name: '坦桑尼亚', lng: 35.45, lat: -6.08 },
  // { name: '美国', lng: -77.02, lat: 39.91 },
  // { name: '乌拉圭', lng: -56.11, lat: -34.5 },
  // { name: '瓦努阿图', lng: 168.18, lat: -17.45 },
  // { name: '委内瑞拉', lng: -66.55, lat: 10.3 },
  // { name: '越南', lng: 105.55, lat: 21.05 },
  // { name: '南斯拉夫', lng: 20.37, lat: 44.5 },
  // { name: '赞比亚', lng: 28.16, lat: -15.28 },
  // { name: '津巴布韦', lng: 31.02, lat: -17.43 },

  { name: 'New York', lat: 40.7127837, lng: -74.0059413 },
  { name: 'Los Angeles', lat: 34.0522342, lng: -118.2436849 },
  { name: 'Chicago', lat: 41.8781136, lng: -87.6297982 },
  { name: 'Houston', lat: 29.7604267, lng: -95.3698028 },
  { name: 'Philadelphia', lat: 39.9525839, lng: -75.1652215 },
  { name: 'Phoenix', lat: 33.4483771, lng: -112.0740373 },
  { name: 'San Antonio', lat: 29.4241219, lng: -98.49362819999999 },
  { name: 'San Diego', lat: 32.715738, lng: -117.1610838 },
  { name: 'Dallas', lat: 32.7766642, lng: -96.79698789999999 },
  { name: 'San Jose', lat: 37.3382082, lng: -121.8863286 },
  { name: 'Austin', lat: 30.267153, lng: -97.7430608 },
  { name: 'Indianapolis', lat: 39.768403, lng: -86.158068 },
  { name: 'Jacksonville', lat: 30.3321838, lng: -81.65565099999999 },
  { name: 'San Francisco', lat: 37.7749295, lng: -122.4194155 },
  { name: 'Columbus', lat: 39.9611755, lng: -82.99879419999999 },
  { name: 'Charlotte', lat: 35.2270869, lng: -80.8431267 },
  { name: 'Fort Worth', lat: 32.7554883, lng: -97.3307658 },
  { name: 'Detroit', lat: 42.331427, lng: -83.0457538 },
  { name: 'El Paso', lat: 31.7775757, lng: -106.4424559 },
  { name: 'Memphis', lat: 35.1495343, lng: -90.0489801 },
  { name: 'Seattle', lat: 47.6062095, lng: -122.3320708 },
  { name: 'Denver', lat: 39.7392358, lng: -104.990251 },
  { name: 'Washington', lat: 38.9071923, lng: -77.0368707 },
  { name: 'Boston', lat: 42.3600825, lng: -71.0588801 },
  { name: 'Nashville-Davidson', lat: 36.1626638, lng: -86.7816016 },
  { name: 'Baltimore', lat: 39.2903848, lng: -76.6121893 },
  { name: 'Oklahoma City', lat: 35.4675602, lng: -97.5164276 },
  { name: 'Louisville/Jefferson County', lat: 38.2526647, lng: -85.7584557 },
  { name: 'Portland', lat: 45.5230622, lng: -122.6764816 },
  { name: 'Las Vegas', lat: 36.1699412, lng: -115.1398296 },
  { name: 'Milwaukee', lat: 43.0389025, lng: -87.9064736 },
  { name: 'Albuquerque', lat: 35.0853336, lng: -106.6055534 },
  { name: 'Tucson', lat: 32.2217429, lng: -110.926479 },
  { name: 'Fresno', lat: 36.7468422, lng: -119.7725868 },
  { name: 'Sacramento', lat: 38.5815719, lng: -121.4943996 },
  { name: 'Long Beach', lat: 33.7700504, lng: -118.1937395 },
  { name: 'Kansas City', lat: 39.0997265, lng: -94.5785667 },
  { name: 'Mesa', lat: 33.4151843, lng: -111.8314724 },
  { name: 'Virginia Beach', lat: 36.8529263, lng: -75.97798499999999 },
  { name: 'Atlanta', lat: 33.7489954, lng: -84.3879824 },
  { name: 'Colorado Springs', lat: 38.8338816, lng: -104.8213634 },
  // { name: 'Omaha', lat: 41.2523634, lng: -95.99798829999999 },
  // { name: 'Raleigh', lat: 35.7795897, lng: -78.6381787 },
  // { name: 'Miami', lat: 25.7616798, lng: -80.1917902 },
  // { name: 'Oakland', lat: 37.8043637, lng: -122.2711137 },
  // { name: 'Minneapolis', lat: 44.977753, lng: -93.2650108 },
  // { name: 'Tulsa', lat: 36.1539816, lng: -95.99277500000001 },
  // { name: 'Cleveland', lat: 41.49932, lng: -81.6943605 },
  // { name: 'Wichita', lat: 37.688889, lng: -97.336111 },
  // { name: 'Arlington', lat: 32.735687, lng: -97.10806559999999 },
  // { name: 'New Orleans', lat: 29.95106579999999, lng: -90.0715323 },
  // { name: 'Bakersfield', lat: 35.3732921, lng: -119.0187125 },
  // { name: 'Tampa', lat: 27.950575, lng: -82.4571776 },
  // { name: 'Honolulu', lat: 21.3069444, lng: -157.8583333 },
  // { name: 'Aurora', lat: 39.7294319, lng: -104.8319195 },
  // { name: 'Anaheim', lat: 33.8352932, lng: -117.9145036 },
  // { name: 'Santa Ana', lat: 33.7455731, lng: -117.8678338 },
  // { name: 'St. Louis', lat: 38.6270025, lng: -90.19940419999999 },
  // { name: 'Riverside', lat: 33.9533487, lng: -117.3961564 },
  // { name: 'Corpus Christi', lat: 27.8005828, lng: -97.39638099999999 },
  // { name: 'Lexington-Fayette', lat: 38.0405837, lng: -84.5037164 },
  // { name: 'Pittsburgh', lat: 40.44062479999999, lng: -79.9958864 },
  // { name: 'Anchorage', lat: 61.2180556, lng: -149.9002778 },
  // { name: 'Stockton', lat: 37.9577016, lng: -121.2907796 },
  // { name: 'Cincinnati', lat: 39.1031182, lng: -84.5120196 },
  // { name: 'St. Paul', lat: 44.9537029, lng: -93.0899578 },
  // { name: 'Toledo', lat: 41.6639383, lng: -83.55521200000001 },
  // { name: 'Greensboro', lat: 36.0726354, lng: -79.7919754 },
  // { name: 'Newark', lat: 40.735657, lng: -74.1723667 },
  // { name: 'Plano', lat: 33.0198431, lng: -96.6988856 },
];

class WebGlControl {
  private container: any;
  private camera: any;
  private scene: any;
  private renderer: any;
  private stats: any;
  private animateFrame: any;
  private tween: any;
  private controls: any;
  private clock: any = new Three.Clock();
  private textureLoader = new Three.TextureLoader();

  private Geometrys: {
    earthGeometry?: any;
    cloudGeometry?: any;
  } = {}; //保存所有Geometry，方便统一销毁
  private Materials: {
    earthMaterial?: any;
    cloudMaterial?: any;
  } = {}; //保存所有Material，方便统一销毁
  private Meshs: {
    cloud?: any;
    flight?: any;
  } = {};
  private earthGroup: any = new Three.Group();
  private flightsGroup: any = new Three.Group();

  private GuiInit: any = null;
  private guiData: any = {
    earthRadius: 30, //地球半径
    rotate: 0.001,
    // rotate: 0.0,
    // color: '#000000',

    roughness: 0.6,
    metalness: 0.42,
    displacementScale: 1.5,
  };

  public init = (id: string) => {
    // if(this.scene) {return}
    this.container = document.getElementById(id);
    let width = this.container.clientWidth,
      height = this.container.clientHeight;

    const bgMap = this.textureLoader.load(assets.starsBg);
    bgMap.wrapS = Three.RepeatWrapping;
    bgMap.wrapT = Three.RepeatWrapping;
    bgMap.repeat.set(0.65, 1.4);
    bgMap.magFilter = Three.NearestFilter;
    this.scene = new Three.Scene();
    this.scene.background = bgMap;
    // this.scene.fog = new Three.Fog( 0xcccccc, 2, 120 );

    this.camera = new Three.PerspectiveCamera(60, width / height, 1, 500);
    this.camera.position.x = 0;
    this.camera.position.y = 0;
    this.camera.position.z = -80;
    this.camera.lookAt(this.scene.position);

    this.renderer = new Three.WebGLRenderer();
    // this.renderer.setClearColor( 0xffffff );
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(width, height);
    this.container.appendChild(this.renderer.domElement);

    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    this.controls.enableDamping = true; //阻尼
    this.controls.dampingFactor = 0.1; //阻尼
    this.controls.autoRotate = true;
    this.controls.enablePan = false;
    this.controls.minDistance = 60;
    this.controls.maxDistance = 80;
    this.controls.zoomSpeed = 0.6;
    this.controls.autoRotateSpeed = -this.guiData.rotate * 500;

    this.addThings();
    this.addLight(); //+光源
    this.animate(); //开始动
    this.initStats();

    this.initGui();
  };
  public destroy = () => {
    this.toggleGui(0);
    Object.values(this.Geometrys).forEach((e) => {
      e.dispose();
    });
    Object.values(this.Materials).forEach((e) => {
      e.dispose();
    });
    Object.values(this.Meshs).forEach((e) => {
      e = null;
    });
    this.earthGroup.clear();
    this.flightsGroup.clear();
    this.scene.clear();
    this.renderer.dispose();
    this.renderer.forceContextLoss();
    this.camera = null;
    this.scene = null;
    this.renderer = null;
    this.GuiInit = null;
    this.stats = null;
    if (this.tween) {
      this.tween.stop();
      this.tween = null;
    }
    cancelAnimationFrame(this.animateFrame);
  };

  private initStats = () => {
    this.stats = new Stats();
    this.stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
    this.stats.dom.style.position = 'absolute';
    this.container.appendChild(this.stats.dom);
  };

  public initGui = () => {
    if (this.GuiInit) {
      this.toggleGui();
      return;
    }
    this.GuiInit = new dat.GUI({
      // autoPlace: false
    });

    this.GuiInit.domElement.style.position = 'absolute';
    this.GuiInit.domElement.style.right = '10px';
    this.GuiInit.domElement.style.top = '10px';

    let GuiController = this.GuiInit.addFolder('控制窗口');
    GuiController.add(this.guiData, 'rotate', -0.05, 0.05, 0.001).name(
      '自转速度',
    );
    // GuiController.addColor(this.guiData, 'color').name('背景颜色');

    GuiController.add(this.guiData, 'roughness', 0, 1, 0.01)
      .name('粗糙')
      .onChange((value) => {
        this.Materials.earthMaterial.roughness = value;
      });
    GuiController.add(this.guiData, 'metalness', 0, 1, 0.01)
      .name('金属')
      .onChange((value) => {
        this.Materials.earthMaterial.metalness = value;
      });
    GuiController.add(this.guiData, 'displacementScale', 0, 4, 0.1)
      .name('置换')
      .onChange((value) => {
        this.Materials.earthMaterial.displacementScale = value;
      });

    GuiController.open();

    // let cubeGui = this.GuiInit.addFolder("cube position");
    // cubeGui.open()
  };

  public toggleGui = (state: any = null) => {
    if (!this.GuiInit || !this.GuiInit.domElement) {
      return;
    }
    let display = this.GuiInit.domElement.style.display == 'none' ? '' : 'none';
    if (state == 0) {
      display = 'none';
    }
    this.GuiInit.domElement.style.display = display;
  };

  private addLight = () => {
    let ambi = new Three.AmbientLight(0xffffff);
    ambi.intensity = 0.2;
    this.scene.add(ambi);
    let dirLight = new Three.DirectionalLight(0xffffff);
    dirLight.position.set(10, 10, -30);
    dirLight.intensity = 0.95;
    this.scene.add(dirLight);

    const rectLight = new Three.RectAreaLight(0xffffff, 2.5, 60, 60);
    rectLight.position.set(-55, 0, 0);
    rectLight.lookAt(0, 0, 0);
    this.scene.add(rectLight);
    // let light = new Three.PointLight( 0xFFFF00 );
    // light.position.set( -100, 100, 0 );
    // this.scene.add(light);
  };

  private addThings = async () => {
    // const axesHelper = new Three.AxesHelper( 800 );
    // this.scene.add( axesHelper )  //添加坐标轴；红线是X轴，绿线是Y轴，蓝线是Z轴
    this.earthGroup.add(this.flightsGroup);
    this.scene.add(this.earthGroup);
    this.addEarth();
    this.addClouds();

    this.initTween();

    await this.loadFlight();
    this.initFlights(40);
  };

  private addEarth = () => {
    const colorMap = this.textureLoader.load(assets.earthColor);
    const displacementMap = this.textureLoader.load(assets.earthBump);
    const metalnessMap = this.textureLoader.load(assets.earthWaterInvert);
    // const aoMap = this.textureLoader.load( 'models/obj/ninja/ao.jpg' );
    this.Materials.earthMaterial = new Three.MeshStandardMaterial({
      color: 0xc1c1c1,
      roughness: this.guiData.roughness,
      roughnessMap: metalnessMap,
      metalness: this.guiData.metalness,
      // metalnessMap: metalnessMap,

      map: colorMap,
      // normalMap: normalMap,
      // normalScale: new Three.Vector2( 1, - 1 ), // why does the normal map require negation in this case?

      // aoMap: aoMap,
      // aoMapIntensity: 1,

      displacementMap: displacementMap,
      displacementScale: this.guiData.displacementScale,
      displacementBias: -0.428408,

      // envMap: reflectionCube,
      // envMapIntensity: this.guiData.envMapIntensity,

      side: Three.DoubleSide,
    });

    this.Geometrys.earthGeometry = new Three.SphereGeometry(
      this.guiData.earthRadius,
      100,
      100,
    );
    const mesh = new Three.Mesh(
      this.Geometrys.earthGeometry,
      this.Materials.earthMaterial,
    );
    // mesh.rotation.set(0, 3.4, 0);
    this.earthGroup.add(mesh);
  };

  private addClouds = () => {
    const colorMap = this.textureLoader.load(assets.earthClouds);
    this.Materials.cloudMaterial = new Three.MeshStandardMaterial({
      transparent: true,
      alphaMap: colorMap,
      opacity: 0.8,

      map: colorMap,
      side: Three.DoubleSide,

      depthWrite: false, // 不影响别的ShaderMaterial
    });

    this.Geometrys.cloudGeometry = new Three.SphereGeometry(
      this.guiData.earthRadius + 0.5,
      100,
      100,
    );
    this.Meshs.cloud = new Three.Mesh(
      this.Geometrys.cloudGeometry,
      this.Materials.cloudMaterial,
    );
    this.earthGroup.add(this.Meshs.cloud);
  };

  private loadFlight = async () => {
    return new Promise<any>((resolve, reject) => {
      const colorMap = this.textureLoader.load(assets.flightTex);
      colorMap.colorSpace = Three.SRGBColorSpace;

      const material1 = new Three.MeshBasicMaterial({ color: '#fff' });
      const material = new Three.MeshBasicMaterial({ map: colorMap });
      let objLoader = new OBJLoader();
      // objLoader.setMaterials(materials);
      objLoader.load(
        '../../models/flight.obj',
        (object: any) => {
          object.traverse((child) => {
            if (child instanceof Three.Mesh) {
              if (child.name == 'main') {
                child.material = material;
              } else {
                child.material = material1;
              }
              child.material.shininess = 0.001;
              child.material.reflectivity = 0.1;
              object.receiveShadow = true;
              object.castShadow = true;
            }
          });
          // console.log('flight object:::', object);
          // object.position.set(-2, 0, 1);
          object.receiveShadow = true;
          object.castShadow = true;
          this.Meshs.flight = object;
          resolve(object);
        },
        (xhr) => {
          console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
        },
        (error) => {
          console.log(error);
          resolve(null);
        },
      );
    });
  };
  private initFlights = (num: number) => {
    // const dot = new BlurCircle({blur: 0.5, radius: 0.3, geoSize: 2,
    //   color1: '#9fead6',
    //   // color2: '#d89ce8'
    // })
    // dot.position.set(0,2,30.4)
    // this.earthGroup.add( dot );

    // this.flightsGroup.rotation.set(0, 3.4, 0);  //会让children.lookAt产生偏差
    const angle = new Three.Euler(0, 0, 0, 'XYZ');
    const cityLen = LatLngs.length;
    let prevPos: number[] = [];
    for (let i = 0; i < num * 2; i++) {
      const randomCity = Math.floor(Math.random() * cityLen);
      const city = LatLngs[randomCity];
      if (city) {
        // const torus = torusBase.clone()
        const pos = CalcThree.latLongToVector3({
          lat: city.lat,
          lng: city.lng,
          radius: this.guiData.earthRadius + 0.18,
        });

        const start = new Three.Vector3(pos.x, pos.y, pos.z);
        const end = new Three.Vector3(prevPos[0], prevPos[1], prevPos[2]);
        start.applyEuler(angle);
        end.applyEuler(angle);

        if (i % 2 == 1) {
          const fgp = new FlightGroup({
            start,
            end,
            flightMesh: this.Meshs.flight.clone(),
          });
          if (fgp.STATUS !== 0) {
            this.flightsGroup.add(fgp);
            fgp.onCallback(() => {
              fgp.destroy();
              // console.log('destroyed::', this.flightsGroup)
              let num = 40 - this.flightsGroup.children.length;
              if (num > 0) {
                this.initFlights(num);
              }
            });
          }
        }

        prevPos = [pos.x, pos.y, pos.z];
      }
    }

    // console.log('this.flightsGroup length', this.flightsGroup.children.length)
  };

  private initTween = () => {};

  private animate = () => {
    // if(!this.renderer){return;}
    if (this.stats) {
      this.stats.begin();
    }

    this.render();
    TWEEN.update();
    this.controls.update();

    if (this.stats) {
      this.stats.end();
    }
    this.animateFrame = requestAnimationFrame(this.animate);
  };
  private render = () => {
    const delta = this.clock.getDelta();
    this.renderer.setClearColor(this.guiData.color, 1.0);
    // if(this.guiData.autoRotate){
    // }

    // this.earthGroup.rotation.y -= this.guiData.rotate;
    this.Meshs.cloud.rotation.y += this.guiData.rotate * 0.4;

    for (let i = 0; i < this.flightsGroup.children.length; i++) {
      this.flightsGroup.children[i].update(delta);
      // console.log(this.flightsGroup.children)
    }
    // const newView = this.camera.position.clone().sub(this.controls.target);
    // this.customMaterial.uniforms.viewVector.value = newView;

    this.renderer.render(this.scene, this.camera);
  };
}

const webGlControl = new WebGlControl();
export default webGlControl;
